import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, ButtonGroup , DateRangeWrapper} from '@folio/stripes/components';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import {  IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
  constructor(props) {
    super(props);
  }

    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      initialValues: PropTypes.object,
      dictionary: PropTypes.object,
      cleanSearch: PropTypes.func,
      intl: PropTypes.func,
      changeUrgentNotify:PropTypes.func,
      labelName:PropTypes.object,
      toModel: PropTypes.func,
      openApproval: PropTypes.func,
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
       intl,
      } = this.props;
      const getter = (e, value) => {
        return value;
      };
      return (

        <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="partyName"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyName' })}
                  //onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              {/* <Col xs={2}>
                <Field
                  component={TextField}
                  name="readerName"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerName' })}
                 // onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="readerAccount"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerAccount' })}
                  //onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col> */}
              <Col xs={2}>
                <Field
                  component={Select}
                  name="state"
                 // onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      id: '0',
                      value: '',
                      label: intl.formatMessage({id:'ui-party.loans.columns.party.approvalStatus'})
                    },
                 
                  {
                    id: '1',
                    value: '0',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.unapproved' })
                  },
                    {
                      id: '2',
                      value: '1',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.approved' })
                    },
                    {
                      id: '3',
                      value: '2',
                      label: intl.formatMessage({ id: 'ui-party.other.unapproved' })
                    }
                  ]}
                />
              </Col>
              {/* <Col xs={2}>
                <Field
                  component={Select}
                  name="score"
                 // onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      id: '0',
                      value: '',
                      label: intl.formatMessage({id:'ui-party.loans.columns.party.appraisal.score'})
                    },
                    {
                      id: '1',
                      value: '1',
                      label:  '1'
                    },
                    {
                      id: '2',
                      value: '2',
                      label: '2'
                    },
                    {
                      id: '3',
                      value: '3',
                      label: '3'
                    },
                    {
                      id: '4',
                      value: '4',
                      label: '4'
                    },
                    {
                      id: '5',
                      value: '5',
                      label: '5'
                    }
                  ]}
                />
              </Col> */}
               <Col xs={6}>
              <DateRangeWrapper
                initialStartDate="2020-01-01"
                initialEndDate="2099-01-01"
                startValueGetter={getter}
                endValueGetter={getter}
              >
                {({
                  getStartInputProps,
                  getEndInputProps,
                  endDateExclude,
                  startDateExclude,
                }) => (
                 <Row>
                  <Col xs={4}>
                    
                        <Field
                            placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.startDate' })}
                          name="partyStartDate"
                          component={DatePerfectChoice}
                          exclude={startDateExclude}
                          dateFormat="YYYY-MM-DD"
                          isClear
                          timeZone="Asia/Shanghai"
                          onRef={this.startDateRef}
                          {...getStartInputProps()}
                          //onBlur={this.fieldChange}
                          onClearField={this.fieldChange}
                        />
                 </Col>
                   <Col xs={4}>
                   <Field

                     name="partyEndDate"
                     placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.endDate' })}
                     component={DatePerfectChoice}
                     exclude={endDateExclude}
                     isClear
                     dateFormat="YYYY-MM-DD"
                     onRef={this.endDateRef}
                     timeZone="Asia/Shanghai"
                     {...getEndInputProps()}
                   />
                 </Col>
                 </Row>
                ) }</DateRangeWrapper>
                </Col>
            
                <Col xs={6}>
              <ButtonGroup>
                  <Button type="submit">
                    <FormattedMessage id="ui-party.search" />
                  </Button>
                  <Button onClick={()=>{
                    this.props.openApproval()
                  }}>
                    <FormattedMessage id="ui-party.loans.columns.operating.approval"  />
                  </Button>
                  <Button onClick={()=>{
                    this.props.exportData()
                  }}>
                    <FormattedMessage id="ui-party.export"  />
                  </Button>
                  <Button onClick={()=>{
                    this.props.batchDeleteData()
                  }}>
                    <FormattedMessage id="ui-party.systemLog.data.type.delete"  />
                  </Button>
                </ButtonGroup>
                </Col>
             
         
             
            
            </Row>
          </form>

      );
    }
}

export default injectIntl(
  reduxForm({
    form:   'appraisalSearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
